import SectionHeader from '@/components/section-header'
import PropTypes from 'prop-types'
import React, { memo, useCallback, useState } from 'react'
import { Sectionv2Wrapper } from './style'
import SectionRooms from '@/components/section-rooms'
import SectionTab from '@/components/section-tab'
import SectionFooter from '@/components/section-footer'

const Sectionv2 = memo(({dataInfo}) => {
  // 各个地址名 作为标签
  const tabs = dataInfo.dest_address?.map(tab => tab.name)
  // 默认选择第一个地址
  const initialName = Object.keys(dataInfo.dest_list)?.[0]
  const [name, setName] = useState(initialName)
  
  // name：子组件tab传递回来的地址名 该组件通过list[name] 获取对于地址的所有房源 
  const changeTabHandler = useCallback((name) => {
    setName(name)
  }, [])
  return (
    <Sectionv2Wrapper>
        <SectionHeader title={dataInfo.title} subtitle={dataInfo.subtitle}/>
        <SectionTab tabs = {tabs} changeEvent = {changeTabHandler}/>
        <SectionRooms rooms={dataInfo.dest_list?.[name]} width="33.3333%"/>
        <SectionFooter name={name} type={dataInfo.type}/>
    </Sectionv2Wrapper>
  )
})

Sectionv2.propTypes = {
    dataInfo: PropTypes.object
}

export default Sectionv2